<template>
    <div>
        <div style="display: flex;justify-content: space-between;">
            <div>
                <!-- clearable：让搜索框有个X，可以清除数据  对应的点击事件 @clear="initEmps"  v-model数据绑定对应的数据 -->
                <el-input
                        v-model="keyword"
                        clearable
                        @clear="initEmps"
                        placeholder="请输入员工名进行搜索，可以直接回车搜素..."
                        prefix-icon="el-icon-search"
                        style="width: 350px;margin-right: 10px;"
                        :disabled="showAdvanceSearchView"
                        @keydown.enter.native="initEmps">
                </el-input>
                <!--:disabled="showAdvanceSearchView" 如果高级搜索打开的话，普通的搜索功能禁用  如果高级搜索关闭  普通搜索可以实现   -->
                <el-button icon="el-icon-search" type="primary" :disabled="showAdvanceSearchView"  @click="initEmps">搜索</el-button>
                <!-- 点击事件触发后 出现或者隐藏   -->
                <el-button type="primary" @click="showAdvanceSearchView = !showAdvanceSearchView">
                    <i :class="showAdvanceSearchView?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                       aria-hidden="true"></i>
                    高级搜索
                </el-button>
            </div>
            <div>
              <!--  <el-button type="success" class="fa fa-level-up">
                    导入数据
                </el-button>-->

                <!--  :show-file-list="false"不展示上传列表
                 before-upload	 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
                 on-success 文件上传成功时的钩子
                 on-error 文件上传失败时的钩子
                 disabled	是否禁用
                 -->
                <el-upload
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :disabled="importDataDisabled"
                        style="display: inline-flex; margin-right: 8px;"
                        action="/employee/basic/import">
                    <el-button :disabled="importDataDisabled" type="success" :icon="importDataBtnIcon">
                        {{importDataBtnText}}
                    </el-button>
                </el-upload>
                <!--icon="el-icon-download" 图标-->
                <el-button type="success"  class="fa fa-level-down" @click="exportData" >
                    导出数据
                </el-button>
                <el-button type="success" icon="el-icon-plus"   @click="showAddEmpView">
                    添加用户
                </el-button>
            </div>
        </div>

        <!--高级搜索内容   transition name="slide-fade" 动画效果   v-show="showAdvanceSearchView"  控制显隐的标识 -->
        <transition name="slide-fade">
            <div  v-show="showAdvanceSearchView"
                 style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px;">
                <el-row>
                    <el-col :span="5">
                        政治面貌:
                        <el-select v-model="searchValue.politicid" placeholder="政治面貌" size="mini"
                                   style="width: 130px;">
                            <el-option
                                    v-for="item in politicsstatus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        民族:
                        <el-select v-model="searchValue.nationid" placeholder="民族" size="mini"
                                   style="width: 130px;">
                            <el-option
                                    v-for="item in nations"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职位:
                        <el-select v-model="searchValue.posid" placeholder="职位" size="mini" style="width: 130px;">
                            <el-option
                                    v-for="item in positions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职称:
                        <el-select v-model="searchValue.joblevelid" placeholder="职称" size="mini"
                                   style="width: 130px;">
                            <el-option
                                    v-for="item in joblevels"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        聘用形式:
                        <el-radio-group v-model="searchValue.engageform">
                            <el-radio label="劳动合同">劳动合同</el-radio>
                            <el-radio label="劳务合同">劳务合同</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="5">
                        所属部门:
                        <el-popover
                                placement="right"
                                title="请选择部门"
                                width="200"
                                trigger="manual"
                                v-model="popVisible2">
                            <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                     @node-click="searvhViewHandleNodeClick"></el-tree>
                            <div slot="reference"
                                 style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                                 @click="showDepView2">{{inputDepName}}
                            </div>
                        </el-popover>
                    </el-col>
                    <el-col :span="10">
                        入职日期:
                        <el-date-picker
                                v-model="searchValue.beginDateScope"
                                type="daterange"
                                size="mini"
                                unlink-panels
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="4">
                        <el-button size="mini">取消</el-button>
                        <el-button size="mini" icon="el-icon-search" type="primary" @click="initEmps('advanced')">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
        </transition>



        <!--搜索栏结束 -->

        <!--数据内容展示 -->
        <div style="margin-top: 10px;">
            <!-- stripe斑马纹  border边框-->
            <el-table
                    :data="emps"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载数据..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 100%">
                <!-- 多选框 -->
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <!-- fixed表示固定这一列    align="left" 表示文本向左-->
                <el-table-column prop="name"  fixed align="left" label="姓名" width="90"></el-table-column>
                <el-table-column prop="workid" label="工号"  width="80"></el-table-column>
                <el-table-column prop="gender"   label="性别"   align="left"   width="85"></el-table-column>
                <el-table-column prop="birthday"  width="95" align="left" label="出生日期"></el-table-column>
                <el-table-column prop="idcard"  width="150" align="left"  label="身份证号码"></el-table-column>
                <el-table-column prop="wedlock"  width="70"   label="婚姻状况"></el-table-column>
                <el-table-column prop="nation.name"  width="50"  label="民族"></el-table-column>
                <el-table-column prop="nativeplace"  width="80"  label="籍贯"></el-table-column>
                <el-table-column prop="politicsstatus.name"   label="政治面貌"></el-table-column>
                <el-table-column prop="email"  width="180" align="left"  label="电子邮箱"></el-table-column>
                <el-table-column prop="phone"  width="100" align="left"  label="电话号码"></el-table-column>
                <el-table-column prop="address"  width="220" align="left"  label="联系地址"></el-table-column>
                <el-table-column prop="department.name"  width="100" align="left"  label="所属部门"></el-table-column>
                <el-table-column prop="position.name"  width="100"  label="职位"></el-table-column>
                <el-table-column prop="jobLevel.name"  width="100"  label="职称"></el-table-column>
                <el-table-column prop="engageform"  width="100" align="left"  label="聘用形式"></el-table-column>
                <el-table-column prop="tiptopdegree"   width="80"   align="left"  label="最高学历"></el-table-column>
                <el-table-column prop="specialty" width="150"  align="left" label="专业"></el-table-column>
                <el-table-column prop="school" width="150" align="left" label="毕业院校"></el-table-column>
                <el-table-column prop="begindate"  width="95" align="left"  label="入职日期"></el-table-column>
                <el-table-column prop="conversiontime"  width="95" align="left"  label="转正日期"></el-table-column>
                <el-table-column prop="begincontract"  width="95" align="left"  label="合同起始日期"></el-table-column>
                <el-table-column prop="endcontract"  width="95" align="left"  label="合同终止日期"></el-table-column>
                <el-table-column
                        width="100"
                        align="left"
                        label="合同期限">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.contractterm}}</el-tag>年
                    </template>
                </el-table-column>
                <el-table-column prop="tiptopdegree"  label="最高学历"></el-table-column>
                <el-table-column
                        fixed="right"
                        width="200"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showEditEmpView(scope.row)" style="padding: 3px;" size="mini">编辑</el-button>
                        <el-button style="padding: 3px;" size="mini" type="primary">查看高级资料</el-button>
                        <!--scope.row  得到当前行的数据 -->
                        <el-button @click="deleteEmp(scope.row)" style="padding: 3px;" size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页插件  layout 展示的页面的内容  @current-change 点击页数 跳转触发事件  @size-change点击每页大小触发事件-->
            <div style="display: flex; justify-content: flex-end;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
             <!--分页插件结束  -->
        </div>
        <!--数据内容展示结束-->
        <!-- 对话框  title 标题改成动态显示内容  -->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <!-- ref是取别名，表单检验时用    :model="emp" :rules="rules"  配置这两个就可以进行校验 -->
                <el-form   :model="emp" :rules="rules"  ref="empForm">
                    <!--el-row  一列 24格 -->
                    <el-row>
                        <el-col :span="6">
                            <!-- prop属性是用来表单校验的 -->
                            <el-form-item label="姓名:" prop="name">
                                <el-input v-model="emp.name" placeholder="请输入员工姓名" size="mini" style="width: 150px;" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别:" prop="gender">
                                <el-radio-group v-model="emp.gender">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女" style="margin-left: 5px;">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出生日期:" prop="birthday">
                                <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                                <el-date-picker
                                        v-model="emp.birthday"
                                        type="date"
                                        size="mini"
                                        style="width: 150px;"
                                        value-format="yyyy-MM-dd"
                                        placeholder="出生日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="政治面貌:" prop="politicid">
                                <el-select v-model="emp.politicid" placeholder="政治面貌" size="mini" style="width: 200px;">
                                    <el-option
                                            v-for="item in politicsstatus"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="民族:" prop="nationid">
                                <el-select v-model="emp.nationid" placeholder="政治面貌" size="mini" style="width: 150px;">
                                    <el-option
                                            v-for="item in nations"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="籍贯:" prop="nativeplace">
                                <el-input v-model="emp.nativeplace" placeholder="请输入籍贯" size="mini" style="width: 120px;" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电子邮箱:" prop="email">
                                <el-input v-model="emp.email" placeholder="请输入电子邮箱" size="mini" style="width: 150px;" prefix-icon="el-icon-message"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="联系地址:" prop="address">
                                <el-input v-model="emp.address" placeholder="请输入联系地址" size="mini" style="width: 200px;" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="职位:" prop="posId">
                                <el-select v-model="emp.posid" placeholder="请选择职位" size="mini" style="width: 150px;">
                                    <el-option
                                            v-for="item in positions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="职称:" prop="jobLevelId">
                                <el-select v-model="emp.joblevelid" placeholder="请选择职称" size="mini" style="width: 150px;">
                                    <el-option
                                            v-for="item in joblevels"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                                   <!--输入框用的是div来进行展示 修改样式成input的模式  el-popover来弹出框   placement右边展示
                                    trigger="manual"  手动激活弹框  【value / v-model状态是否可见】
                                   -->
                                所属部门:
                                <el-popover
                                        placement="right"
                                        title="请选择部门"
                                        width="200"
                                        trigger="manual"
                                        v-model="popVisible2">
                                    <!--el-tree 弹框以树的格式展示  default-expand-all	是否默认展开所有节点
                                      :data="allDeps"  树结构的数据  node-click节点被点击时的回调
                                     -->
                                    <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                             @node-click="searvhViewHandleNodeClick"></el-tree>
                                    <div slot="reference"
                                         style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;
                                         cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                                         @click="showDepView2">{{inputDepName}}
                                    </div>
                                </el-popover>



                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="电话号码:" prop="phone">
                                <el-input v-model="emp.phone" placeholder="请输入电话号码" size="mini" style="width: 200px;" prefix-icon="el-icon-phone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="工号:" prop="workID">
                                <el-input v-model="emp.workid" placeholder="工号" size="mini" disabled style="width: 150px;" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="学历:" prop="tiptopDegree">
                                <el-select v-model="emp.tiptopdegree" placeholder="请选择学历" size="mini" style="width: 150px;">
                                    <el-option
                                            v-for="item in tiptopDegrees"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="毕业院校:" prop="school">
                                <el-input v-model="emp.school" placeholder="请输入毕业院校" size="mini" style="width: 150px;" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="专业名称:" prop="specialty">
                                <el-input v-model="emp.specialty" placeholder="请输入专业名称" size="mini" style="width: 200px;" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="入职日期:" prop="beginDate">
                                <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                                <el-date-picker
                                        v-model="emp.begindate"
                                        type="date"
                                        size="mini"
                                        style="width: 130px;"
                                        value-format="yyyy-MM-dd"
                                        placeholder="入职日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="转正日期:" prop="conversionTime">
                                <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                                <el-date-picker
                                        v-model="emp.conversiontime"
                                        type="date"
                                        size="mini"
                                        style="width: 130px;"
                                        value-format="yyyy-MM-dd"
                                        placeholder="转正日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同起始日期:" prop="beginContract">
                                <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                                <el-date-picker
                                        v-model="emp.begincontract"
                                        type="date"
                                        size="mini"
                                        style="width: 150px;"
                                        value-format="yyyy-MM-dd"
                                        placeholder="合同起始日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同终止日期:" prop="endContract">
                                <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                                <el-date-picker
                                        v-model="emp.endcontract"
                                        type="date"
                                        size="mini"
                                        style="width: 150px;"
                                        value-format="yyyy-MM-dd"
                                        placeholder="合同终止日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="身份证号码:" prop="idCard">
                                <el-input v-model="emp.idcard" placeholder="请输入身份证号码" size="mini" style="width: 180px;" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="合同:" prop="engageForm">
                                <el-radio-group v-model="emp.engageform">
                                    <el-radio label="劳动合同">劳动合同</el-radio>
                                    <el-radio label="劳务合同">劳务合同</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="婚姻状况:" prop="wedlock">
                                <el-radio-group v-model="emp.wedlock">
                                    <el-radio label="已婚">已婚</el-radio>
                                    <el-radio label="未婚">未婚</el-radio>
                                    <el-radio label="离异">离异</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>



                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"  @click="doAddEmp">确 定</el-button>
          </span>
        </el-dialog>
         <!--弹框结束 -->
    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data(){
            return {
                searchValue: {  //高级搜索绑定的值
                    politicid: null,
                    nationid: null,
                    joblevelid: null,
                    posid: null,
                    engageform: null,
                    departmentid: null,
                    beginDateScope: null
                },
                showAdvanceSearchView: false, //高级搜索框 展示或者隐藏
                importDataBtnText: '导入数据',
                importDataBtnIcon: 'el-icon-upload2',
                importDataDisabled: false, //上传过程中禁止再上传  上边三个是文件上传需要的字段
                emps:[],  //员工数据
                loading: false,  //加载提示
                total: 0, //总数量
                page: 1, //页数
                size: 10, //每页大小
                keyword: '', //搜索绑定的值
                dialogVisible: false, //对话框   添加或者修改弹出的对话框
                title:'', //添加或者修改弹出的对话框的标题
                nations: [], //民族数据 下拉使用
                joblevels: [], //职称数据 下拉使用
                politicsstatus: [], //政治面貌数据 下拉使用
                positions: [], //职位数据 下拉使用
                tiptopDegrees: ['本科','大专','硕士','博士','高中','初中','小学','其他'], //学历数据 下拉使用
                popVisible2: false,    //点击所属部门弹框控制的标识
                inputDepName: '', //添加时选中的部门值
                allDeps: [], //添加是展示的所有部门   点击所属部门弹框
                defaultProps: { //添加时的部门树
                    children: 'children',
                    label: 'name'
                },
                emp:{  //添加员工的数据
                    name:'',
                    gender: '男',
                    birthday:'1989-12-31',
                    idcard:'',
                    wedlock: "已婚",
                    nationid: 1,
                    nativeplace: "",
                    politicid: 13,
                    email: "",
                    phone: "",
                    address: "",
                    departmentid: null,
                    joblevelid: 9,
                    posid: 29,
                    engageform: "",
                    tiptopdegree: "本科",
                    specialty: "信息管理与信息系统",
                    school: "深圳大学",
                    begindate: "2017-12-31",
                    workstate: "在职",
                    workid: "00000001",
                    contractterm: 2.0,
                    conversiontime: "2018-03-31",
                    notworkdate: null,
                    begincontract: "2017-12-31",
                    endcontract: "2019-12-31",
                    workage: null,
                },rules:{
                    //required:true:用户名必填  如果没填就弹出““””“"请输入用户名",trigger:blur 触发的方式是blur
                    name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
                    gender:[{required:true,message:"性别不能为空",trigger:"blur"}],
                    birthday:[{required:true,message:"出生日期不能为空",trigger:"blur"}],
                    idcard: [{required: true, message: '请输入身份证号码', trigger: 'blur'}, {
                        pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                        message: '身份证号码格式不正确',
                        trigger: 'blur'
                    }],
                    wedlock:[{required:true,message:"婚姻状况不能为空",trigger:"blur"}],
                    nationid:[{required:true,message:"民族不能为空",trigger:"blur"}],
                    nativeplace:[{required:true,message:"籍贯不能为空",trigger:"blur"}],
                    politicid:[{required:true,message:"政治面貌不能为空",trigger:"blur"}],
                    email:[{required:true,message:"邮箱地址不能为空",trigger:"blur"},{
                        type: 'email',
                        message:'邮箱格式不正确',
                        trigger: 'blur'
                    }],
                    phone:[{required:true,message:"电话号码不能为空",trigger:"blur"}],
                    address:[{required:true,message:"员工地址不能为空",trigger:"blur"}],
                    departmentid:[{required:true,message:"部门名称不能为空",trigger:"blur"}],
                    joblevelid:[{required:true,message:"职称不能为空",trigger:"blur"}],
                    posid:[{required:true,message:"职位不能为空",trigger:"blur"}],
                    engageform:[{required:true,message:"聘用形式不能为空",trigger:"blur"}],
                    tiptopdegree:[{required:true,message:"学历不能为空",trigger:"blur"}],
                    specialty:[{required:true,message:"专业不能为空",trigger:"blur"}],
                    school:[{required:true,message:"毕业院校不能为空",trigger:"blur"}],
                    begindate:[{required:true,message:"入职日期不能为空",trigger:"blur"}],
                    workstate:[{required:true,message:"工作状态不能为空",trigger:"blur"}],
                    workid:[{required:true,message:"工号不能为空",trigger:"blur"}],
                    contractterm:[{required:true,message:"合同期限不能为空",trigger:"blur"}],
                    conversiontime:[{required:true,message:"转正日期不能为空",trigger:"blur"}],
                    notworkdate:[{required:true,message:"离职日期不能为空",trigger:"blur"}],
                    begincontract:[{required:true,message:"合同起始日期不能为空",trigger:"blur"}],
                    endcontract:[{required:true,message:"合同结束日期不能为空",trigger:"blur"}],
                    workage:[{required:true,message:"工龄不能为空",trigger:"blur"}],
                },
            }
        },
        mounted() {
            this.initEmps(); //获取员工数据
            this.initData(); //获取各个下拉框的值：民族、职称、政治面貌
            this.initPositions() //调用该方法获取所有职位
        },
        methods:{
            //文件上传失败时
            onError(err, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
            },
            //文件上传成功时
            onSuccess(response, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
                this.initEmps();
            },
            //文件上传时
            beforeUpload() {
                this.importDataBtnText = '正在导入';
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataDisabled = true;
            },
            // Excel导出员工数据
            exportData(){
                window.open("/employee/basic/export",'_parent');
            },
            // 置空员工信息
            emptyEmp() {
                this.emp = {
                    name: "",
                    gender: "",
                    birthday: "",
                    idcard: "",
                    wedlock: "",
                    nationid: 1,
                    nativeplace: "",
                    politicd: 13,
                    email: "",
                    phone: "",
                    address: "",
                    departmentid: null,
                    joblevelid: 9,
                    posid: 29,
                    engageform: "",
                    tiptopdegree: "",
                    specialty: "",
                    school: "",
                    begindate: "",
                    workID: "",
                    contractterm: 2,
                    conversiontime: "",
                    notworkdate: null,
                    begincontract: "",
                    endcontract: "",
                    workage: null
                }
                this.inputDepName = '';
            },
            //展示编辑员工
            showEditEmpView(data) {
                this.initPositions();//初始化下拉
                this.title = '编辑员工信息';
                this.emp = data;  //数据赋值
                this.inputDepName = data.department.name;  //所属组织赋值
                this.dialogVisible = true;   //打开弹框
            },
            //删除员工
            deleteEmp(data) {
                this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/employee/basic/" + data.id).then(resp => {
                        if (resp) {
                            this.initEmps(); //刷新数据
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 添加部门  提交数据
            doAddEmp() {
                if (this.emp.id) {   //提交更新数据
                    this.$refs['empForm'].validate(valid => {//表单校验
                        if (valid) {
                            this.putRequest("/employee/basic/", this.emp).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;//关闭对话框
                                    this.initEmps();//刷新数据
                                }
                            })
                        }
                    });
                } else {   //提交保存数据
                    this.$refs['empForm'].validate(valid => {//表单校验
                        if (valid) {
                            this.postRequest("/employee/basic/", this.emp).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;//关闭对话框
                                    this.initEmps();//刷新数据
                                }
                            })
                        }
                    });
                }
            },
            // 高级搜索的部门对话框  打开或者关闭
            showDepView2() {
                this.popVisible2 = !this.popVisible2
            },

            //高级搜索中的所属部门
            //节点被点击时的回调	 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
            searvhViewHandleNodeClick(data) {
                this.inputDepName = data.name;
                this.emp.departmentid = data.id;
                this.popVisible2 = !this.popVisible2
            },

            //获取当前最大的工号
            getMaxWordID(){
                this.getRequest('/employee/basic/maxWorkID').then(resp=>{
                    if(resp){
                        this.emp.workid = resp.obj
                    }
                })
            },
            //获取所有职位
            initPositions(){
                this.getRequest('/employee/basic/positions').then(resp=>{
                    if(resp){
                        this.positions = resp
                    }
                })
            },
            // 加载下拉框的值  如果缓存中有就不查询数据库  如果没有就查询数据库
            initData(){
                console.info("initData  加载下拉框的值");
                //民族
                if(!window.sessionStorage.getItem("nations")){
                    this.getRequest('/employee/basic/nations').then(resp=>{
                        if(resp){
                            this.nations = resp
                            //把查到的nations数据存入sessionStorage中
                            window.sessionStorage.setItem("nations", JSON.stringify(resp))
                        }
                    })
                }else{
                    this.nations = JSON.parse(window.sessionStorage.getItem("nations"))
                }
                //职称
                if(!window.sessionStorage.getItem("joblevels")){
                    this.getRequest('/employee/basic/joblevels').then(resp=>{
                        if(resp){
                            this.joblevels = resp
                            //把查到的joblevels数据存入sessionStorage中
                            window.sessionStorage.setItem("joblevels", JSON.stringify(resp))
                        }
                    })
                }else{
                    this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"))
                }
                //政治面貌
                if(!window.sessionStorage.getItem("politicsstatus")){
                    this.getRequest('/employee/basic/politicsstatus').then(resp=>{
                        if(resp){
                            this.politicsstatus = resp
                            //把查到的politicsstatus数据存入sessionStorage中
                            window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp))
                        }
                    })
                }else{
                    this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"))
                }
                //缓存部门数据
                if(!window.sessionStorage.getItem("deps")){
                    this.getRequest('/employee/basic/deps').then(resp=>{
                        if(resp){
                            this.allDeps = resp
                            //把查到的deps数据存入sessionStorage中
                            window.sessionStorage.setItem("deps", JSON.stringify(resp))
                        }
                    })
                }else{
                    this.allDeps = JSON.parse(window.sessionStorage.getItem("deps"))
                }
            },
            // 显示添加员工对话框
            showAddEmpView(){
                this.emptyEmp() //置空表单
                this.title = '添加员工'
                this.dialogVisible = true
                this.initData()
                this.initPositions();
                 this.getMaxWordID() //查询工号
            },
            //展示页面大小  修改每页显示大小
            sizeChange(currentSize){
                this.size = currentSize
                this.initEmps()
            },
            //分页  参数currentPage是当前页  点击页数触发事件
            currentChange(currentPage){
                this.page = currentPage  //赋值
                this.initEmps()  //刷新数据
            },
            //获取员工数据
            /***   普通搜索
            initEmps(){
               this.loading = true
              this.getRequest("/employee/basic/?page=" + this.page + "&size=" + this.size + "&keywords=" + this.keyword).then(resp=>{
                 this.loading = false
                  if(resp){
                     console.log(resp.data+","+resp.total)
                   this.emps = resp.data
                   this.total = resp.total
                }
               })
            }
             ***/


            initEmps(type) {
                this.loading = true;
                let url = '/employee/basic/?page=' + this.page + '&size=' + this.size;
                //如果是高级搜索
                if (type && type == 'advanced') {
                    if (this.searchValue.politicid) {
                        url += '&politicid=' + this.searchValue.politicid;
                    }
                    if (this.searchValue.nationid) {
                        url += '&nationid=' + this.searchValue.nationid;
                    }
                    if (this.searchValue.joblevelid) {
                        url += '&joblevelid=' + this.searchValue.joblevelid;
                    }
                    if (this.searchValue.posid) {
                        url += '&posid=' + this.searchValue.posid;
                    }
                    if (this.searchValue.engageform) {
                        url += '&engageform=' + this.searchValue.engageform;
                    }
                    if (this.searchValue.departmentid) {
                        url += '&departmentid=' + this.searchValue.departmentid;
                    }
                    if (this.searchValue.beginDateScope) {
                        url += '&beginDateScope=' + this.searchValue.beginDateScope;
                    }
                } else {  //普通搜索
                    url += "&name=" + this.keyword;
                }
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                });
            }




        },

    }
</script>

<style scoped>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }

</style>